import React, { Component } from "react"
import './index.css'
import { Layout } from 'antd';
import TopHeader from './TopHeader'
import {
  Switch,
  Route,
  Redirect
} from "react-router-dom";
import Sidermou from './Sidermou'

import Banner from './../banner'
import Cart from './../cart'
import Category from './../category'
import Home from './../home'
import Order from './../order'
import Users from './../users'
import NotFound from '../notfound'
import Product from '../product'
import Userspormis from './../users/pormis'
const {  Content } = Layout;

class Index extends Component {
  render(){
    const roleType = localStorage.getItem('roleType') * 1
    return (
      <Layout style = { { height: '100%' } }>
        {/* 抽离左边 */}
        <Sidermou></Sidermou>
      <Layout className="site-layout">
        {/* 头上抽离 */}
        <TopHeader></TopHeader>
        <Content
          className="site-layout-background"
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
          }}
        >
          {/* Content */}
          <Switch>
              <Route path="/home"><Home /></Route>
              <Route path="/banner/list"><Banner /></Route>
              <Route path="/cart/list"><Cart /></Route>
              <Route path="/category/list"><Category /></Route>
              <Route path="/order/list"><Order /></Route>
              <Route path="/users/list"><Users /></Route>
                {
                  roleType === 3 ? <Route path="/users/pormis"><Userspormis /></Route>: null
                }
              <Route path="/product/list"><Product /></Route>
              {/* exact 精确匹配  只有路由为 /时， 跳转到/home */}
              <Redirect path ="/" exact to ="/home"/>
              {/* 如果查找不到该路由，直接显示404 */}
              <Route><NotFound /></Route>
      </Switch>

        </Content>
      </Layout>
    </Layout>
    )
  }
}
export default Index